<template>
	<view class="content">
		<view class="btns">
			<view class="b1" :class="{active:active==1}" @click="tabClick(1)">{{$t('index.rangqiu')}}</view>
			<view class="b1" :class="{active:active==2}" @click="tabClick(2)">{{$t('index.shengpingfu2')}}</view>
			<view class="b1" :class="{active:active==3}" @click="tabClick(3)">{{$t('index.zongjinqiu')}}</view>
		</view>
		<!-- 让球 -->
		<template v-if="infoRq&&active==1">
			<view class="c-item-jifen c-item-home">
				<view class="c-item-j2">{{$t('index.gongsi')}}</view>
				<view class="c-item-j3">{{$t('index.chushi')}}</view>
				<view class="c-item-j3">{{$t('index.saiqian')}}</view>
			</view>
			<view class="c-item-jifen" v-for="(item,index) in infoRq.odds_array" :key="index" @click="navigatorTo(item)">
				<view class="c-item-j2">{{item.company_name}}</view>
				<view class="c-item-j">
					<view>{{item.home_chu}}</view>
					<view>{{item.handcp_chu}}</view>
					<view>{{item.away_chu}}</view>
				</view>
				<view class="c-item-j" style="color: green;">
					<view :style="{color:item.home_ji>item.home_chu?'red':''}">{{item.home_ji}}</view>
					<view :style="{color:item.handcp_ji>item.handcp_chu?'red':''}">{{item.handcp_ji}}</view>
					<view :style="{color:item.away_ji>item.away_chu?'red':''}">{{item.away_ji}}</view>
					<view style="color: #fff;">></view>
				</view>
			</view>
		</template>
		<!-- 胜平负 -->
		<template v-if="info&&active==2">
			<view class="c-item-jifen c-item-home">
				<view class="c-item-j2">{{$t('index.gongsi')}}</view>
				<view class="c-item-j3"></view>
				<view class="c-item-j3">{{$t('index.zhusheng')}}</view>
				<view class="c-item-j3">{{$t('index.pingju')}}</view>
				<view class="c-item-j3">{{$t('index.kesheng')}}</view>
			</view>
			<view class="c-item-jifen"  v-for="(item,index) in info.odds_array" :key="index"  @click="navigatorTo2(item)">
				<view class="c-item-j2">{{item.company_name}}</view>
				<view class="c-item-j4">
					<view>{{$t('index.chushi')}}</view>
					<view>{{$t('index.jishi')}}</view>
				</view>
				<view class="c-item-j4">
					<view>{{item.home_chu}}</view>
					<view :style="{color:item.home_chu<item.home_ji?'red':'green'}">{{item.home_ji}}</view>
				</view>
				<view class="c-item-j4">
					<view>{{item.ping_chu}}</view>
					<view :style="{color: item.ping_chu<item.ping_ji?'red':'green'}">{{item.ping_ji}}</view>
				</view>
				<view class="c-item-j4">
					<view>{{item.away_chu}}</view>
					<view :style="{color:item.away_chu<item.away_ji?'red':'green'}">{{item.away_ji}}</view>
				</view>
			</view>
		</template>
		<!-- 总进球 -->
		<template v-if="infoZjq&&active==3">
			<view class="c-item-jifen c-item-home">
				<view class="c-item-j2">{{$t('index.gongsi')}}</view>
				<view class="c-item-j3">{{$t('index.chushi')}}</view>
				<view class="c-item-j3">{{$t('index.saiqian')}}</view>
			</view>
			<view class="c-item-jifen" v-for="(item,index) in infoZjq.odds_array" :key="index" @click="navigatorTo(item)">
				<view class="c-item-j2">{{item.company_name}}</view>
				<view class="c-item-j">
					<view>{{item.home_chu}}</view>
					<view>{{item.handcp_chu}}</view>
					<view>{{item.away_chu}}</view>
				</view>
				<view class="c-item-j" style="color: green;">
					<view :style="{color:item.home_ji>item.home_chu?'red':''}">{{item.home_ji}}</view>
					<view :style="{color:item.handcp_ji>item.handcp_chu?'red':''}">{{item.handcp_ji}}</view>
					<view :style="{color:item.away_ji>item.away_chu?'red':''}">{{item.away_ji}}</view>
					<view style="color: #fff;">></view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			matchId: {
				type: [String, Number],
				default: ''
			},
			//lq表示篮球 zq表示足球
			typeName:{
				type: String,
				default: ''
			},
			homeData:{
				type: Object,
				default:()=>{
					return {}
				}
			}
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {},
		data() {
			return {
				active:1,
				infoRq:'',//让球
				info:'',//胜平负
				infoZjq:'',//总进球
			}
		},
		mounted() {
			if(this.typeName=='zq'){
				//让球
				this.zqmatchOddso()
				//胜平负
				this.zqmatchOddsEuro()
				//总进球
				this.zqmatchOddsoZjq()
			}else{
				//让球
				this.lqmatchOddso()
				//胜平负
				this.lqmatchOddsEuro()
				//总进球
				this.lqmatchOddsoZjq()
			}
			
		},
		methods: {
			navigatorTo(item){
				uni.navigateTo({
					url: '/pages/indexDetails/dataDetails?typeName='+this.typeName+'&matchId='+this.matchId+'&companyId='+item.company_id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navigatorTo2(item){
				uni.navigateTo({
					url: '/pages/indexDetails/dataDetailsSPF?typeName='+this.typeName+'&matchId='+this.matchId+'&companyId='+item.company_id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			tabClick(index){
				this.active=index
			},
			//胜平负
			lqmatchOddsEuro() {
				uni.$u.http.get(this.api.api_v1_bkdata_matchOddsEuro, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
			//胜平负
			zqmatchOddsEuro() {
				uni.$u.http.get(this.api.api_v1_fbdata_matchOddsEuro, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
			//让球
			lqmatchOddso() {
				uni.$u.http.get(this.api.api_v1_bkdata_matchOdds, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.infoRq = res.data
					}
				})
			},
			//让球
			zqmatchOddso() {
				uni.$u.http.get(this.api.api_v1_fbdata_matchOdds, {
					params: {
						matchId: this.matchId,
					}
				}).then(res => {
					if (res.code == 200) {
						this.infoRq = res.data
					}
				})
			},
			//总进球
			lqmatchOddsoZjq() {
				uni.$u.http.get(this.api.api_v1_bkdata_matchOdds, {
					params: {
						matchId: this.matchId,
						type:2,
					}
				}).then(res => {
					if (res.code == 200) {
						this.infoZjq = res.data
					}
				})
			},
			//总进球
			zqmatchOddsoZjq() {
				uni.$u.http.get(this.api.api_v1_fbdata_matchOdds, {
					params: {
						matchId: this.matchId,
						type:2,
					}
				}).then(res => {
					if (res.code == 200) {
						this.infoZjq = res.data
					}
				})
			},
			
			// v1/fbdata/matchOdds?matchId=2412965&type=2&clientType=2&version=1.0.19
		}
		
	}
</script>

<style lang="scss" scoped>
	.content {
		color: #fff;font-size: 14px;
		.btns{
			display: flex;justify-content: center;align-items: center;padding: 10px;width: 100%;gap:20px;
			.b1{
				padding: 5px 10px;border-radius: 20px;font-size: 14px;background-color: #242448;text-align: center;
			}
			.active{
				background-color: #ffaf01;
			}
		}
		.title{
			color: #ffaf01;padding:5px 10px;
		}
		.c-item-home{
			background-color: rgba(0, 54, 72, 0.5);
		}
		.c-item-jifen{
			display: flex;width: 100%;border-top: 1px solid #003648;box-sizing: border-box;color: #a8a8a8;
			.c-item-j{
				flex: 1;align-items: center;justify-content: space-between;display: flex;padding:10px 5px;border-right: 1px solid #003648;
			}
			.c-item-j2{
				width: 100px;display: flex;justify-content: center;align-items: center;border-right: 1px solid #003648;
			}
			.c-item-j3{
				flex: 1;align-items: center;justify-content: center;display: flex;padding:10px 5px;border-right: 1px solid #003648;
			}
			.c-item-j4{
				flex: 1;align-items: center;justify-content: center;display: flex;padding:10px 5px;border-right: 1px solid #003648;flex-direction: column;
			}
		}
	}
</style>